﻿@using FluentUI.Demo.Shared.Pages.DataGrid.Examples

@inject DataSource Data
@inject IJSRuntime JSRuntime

<div id="datagrid-container">
    <FluentDataGrid Items="items!.AsQueryable()"
    Pagination="@pagination"
    RowSize="@rowSize"
    AutoItemsPerPage="true"
    Style="overflow-y:hidden;">
        <PropertyColumn Property="@(c => c.Code)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
    </FluentDataGrid>
</div>

<FluentPaginator State="@pagination" />

@code {

    DataGridRowSize rowSize = DataGridRowSize.Small;
    IQueryable<Country>? items;
    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

    protected override async Task OnInitializedAsync() =>
    items = (await Data.GetCountriesAsync()).AsQueryable();

}

